<template>
  <div class="search-results">
    <h1 class="section-title">搜索结果: "{{ searchQuery }}"</h1>
    
    <div v-if="loading" class="loading">搜索中...</div>
    <div v-else>
      <div v-if="results.length > 0" class="grid-container">
        <ItemCard 
          v-for="item in results" 
          :key="item.id" 
          :item="item" 
          @click="$router.push({ name: 'item-detail', params: { id: item.id } })"
        />
      </div>
      <div v-else class="no-results">
        <p>没有找到与 "{{ searchQuery }}" 相关的商品</p>
        <router-link to="/publish" class="btn btn-secondary">发布新商品</router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, watch, onMounted, inject } from 'vue'
import { useRoute } from 'vue-router'
import ItemCard from './ItemCard.vue'

// 模拟商品数据 - 实际应用中应从API获取
const allItems = [
  { 
    id: 1, 
    title: '高等数学教材', 
    price: 25, 
    image: 'book', 
    category: '教材书籍',
    description: '几乎全新，无笔记痕迹。包含教材和习题集，适合大一学生使用。',
    seller: '张同学',
    contact: '138****1234',
    publishDate: '2023-07-10'
  },
  { 
    id: 2, 
    title: '二手笔记本电脑', 
    price: 1200, 
    image: 'laptop', 
    category: '电子数码',
    description: '联想小新，i5处理器，8G内存，256G固态硬盘，使用两年，外观良好，功能正常，无维修记录。',
    seller: '李同学',
    contact: '139****5678',
    publishDate: '2023-07-12'
  },
  { 
    id: 3, 
    title: '篮球', 
    price: 50, 
    image: 'basketball', 
    category: '体育用品',
    description: '斯伯丁篮球，使用半年，保存完好，无漏气现象。',
    seller: '王同学',
    contact: '137****9012',
    publishDate: '2023-07-13'
  },
  { 
    id: 4, 
    title: '台灯', 
    price: 30, 
    image: 'lamp', 
    category: '生活用品',
    description: 'LED护眼台灯，可调节亮度，三种色温模式，使用一年。',
    seller: '赵同学',
    contact: '135****3456',
    publishDate: '2023-07-14'
  },
  // 更多商品...
]

export default {
  components: { ItemCard },
 setup() {
    const route = useRoute()
    const searchQuery = ref(route.query.q || '')
    const results = ref([])
    const loading = ref(false)
    const allItems = inject('items')

    // 搜索函数
    const searchItems = (query) => {
      if (!query) return []

      const lowerQuery = query.toLowerCase()
      let filteredItems = []
      if (Array.isArray(allItems.value)) {
        filteredItems = allItems.value.filter(item => 
          item.title.toLowerCase().includes(lowerQuery) || 
          item.description.toLowerCase().includes(lowerQuery) ||
          item.category.toLowerCase().includes(lowerQuery)
        )
      } else {
        console.error('allItems is not an array:', allItems.value)
      }
      return filteredItems
    }

    // 执行搜索
    const performSearch = () => {
      loading.value = true
      setTimeout(() => {
        results.value = searchItems(searchQuery.value)
        loading.value = false
      }, 500) // 模拟网络延迟
    }

    // 监听路由变化
    watch(() => route.query.q, (newQuery) => {
      searchQuery.value = newQuery
      if (newQuery) {
        performSearch()
      }
    })

    // 组件挂载时执行搜索
    onMounted(() => {
      if (searchQuery.value) {
        performSearch()
      }
    })

    return {
      searchQuery,
      results,
      loading
    }
  }
}
</script>

<style scoped>
.search-results {
  padding: 20px;
}

.loading {
  text-align: center;
  padding: 40px;
  font-size: 1.2rem;
}

.no-results {
  text-align: center;
  padding: 60px 20px;
  background: white;
  border-radius: var(--border-radius);
  box-shadow: var(--shadow);
  max-width: 600px;
  margin: 0 auto;
}

.no-results p {
  margin-bottom: 25px;
  font-size: 1.2rem;
  color: var(--gray-color);
}
</style>